<template>
    <div class="Parentbox">
        <div class="bovin">
            <el-button v-show="showdisplay" class="btn" type="primary" plain @click="back"> <i style="color: #4d83ff"
                    class="iconfont icon-zhijian-gray "></i>
                {{ $t('toproof.ordercenter') }} </el-button>
            <el-card class="box-card" style="background-color: #f7f8fa;">
                <div style="height: 15px;"></div>
                <div class="order" style="display: flex;">
                    <el-card class="myorder">
                        <div><el-button type="text" @click="members">订单中心</el-button></div>
                        <el-button type="text" @click="hidden">我的订单</el-button>
                    </el-card>
                    <div style="width: 10px;"></div>
                    <!-- 右边切换区 -->
                    <el-card style="width: 1044px;">
                        <div v-if="showhiddenmembers" style="width: 1010px;  ">
                            <div style="display: flex;justify-content:space-between ;">
                                <div>我的订单</div>
                                <div style="display: flex;">
                                    <el-input placeholder="请输入内容" style="width: 400px;">
                                        <el-button slot="append" icon="el-icon-search"></el-button>
                                    </el-input>
                                    <div style="width:5px;"></div>
                                    <el-button type="primary" plain>导出</el-button>
                                </div>
                            </div>
                            <div>
                                <el-tabs v-model="activeName">
                                    <el-tab-pane label="全部订单" name="first">
                                        <div style="margin-top: 10px;" v-for="itme in  list" :key="itme.id">
                                            <div class="Orderswitching">
                                                <span class="el-icon-s-order">订单编号 <span>{{ itme.name }}</span></span>
                                                <div style="width: 2px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.age }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span style="color: #a19b83;">{{ itme.time }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.bank }}</span>
                                                <span> 联系人:</span>
                                                <span>{{ itme.linkman }}</span>
                                                <span>申请金额:</span>
                                                <span>{{ itme.money }}</span>
                                                <span>申请期限</span>
                                                <span>{{ itme.deadline }}</span>
                                            </div>
                                            <div class="box">
                                                <span>{{ itme.freight }}</span>
                                                <span>{{ itme.finance }}</span>
                                                <div>
                                                    <div style=" transform: translateX(20px) translateY(0px)">成交金额</div>

                                                    <div
                                                        style=" width: 103px; height: 36px;  border: 1px solid #eef0f5; display: flex; justify-content: center; align-items: center; ">
                                                        {{ itme.make }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div style=" transform: translateX(30px) translateY(0px)">利率</div>
                                                    <div
                                                        style=" width: 103px; height: 36px;  border: 1px solid #eef0f5; display: flex; justify-content: center; align-items: center;">
                                                        {{ itme.rate }}
                                                    </div>
                                                </div>
                                                <div class="frame">
                                                    <div>
                                                        <i
                                                            style=" display: inline-block;  width:10px;  height: 10px; border-radius: 50%;  background-color: #3ea0ff;"></i>
                                                        {{ itme.affirm }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="订单审核" name="second">
                                        <div style="margin-top: 10px;" v-for="itme in  list" :key="itme.id">
                                            <div class="Orderswitching">
                                                <span class="el-icon-s-order">订单编号 <span>{{ itme.name }}</span></span>
                                                <div style="width: 2px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.age }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span style="color: #a19b83;">{{ itme.time }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.bank }}</span>
                                                <span> 联系人:</span>
                                                <span>{{ itme.linkman }}</span>
                                                <span>申请金额:</span>
                                                <span>{{ itme.money }}</span>
                                                <span>申请期限</span>
                                                <span>{{ itme.deadline }}</span>
                                            </div>
                                            <div class="box">
                                                <span>{{ itme.freight }}</span>
                                                <span>{{ itme.finance }}</span>

                                                <div class="frameone"
                                                    style="display: flex; flex-direction: column;  justify-content:center;">
                                                    <el-button
                                                        style="width: 95px; transform: translateX(100px) translateY(-10px)  "
                                                        type="primary">审批通过</el-button>
                                                    <el-button
                                                        style="width: 95px; transform: translateX(90px) translateY(10px)">审批拒绝</el-button>
                                                    <div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </el-tab-pane>
                                    <el-tab-pane label="待签署" name="third">
                                        <div style="margin-top: 10px;" v-for="itme in  list" :key="itme.id">
                                            <div class="Orderswitching">
                                                <span class="el-icon-s-order">订单编号 <span>{{ itme.name }}</span></span>
                                                <div style="width: 2px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.age }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span style="color: #a19b83;">{{ itme.time }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.bank }}</span>
                                                <span> 联系人:</span>
                                                <span>{{ itme.linkman }}</span>
                                                <span>申请金额:</span>
                                                <span>{{ itme.money }}</span>
                                                <span>申请期限</span>
                                                <span>{{ itme.deadline }}</span>
                                            </div>
                                            <div class="box">
                                                <span>{{ itme.freight }}</span>
                                                <span>{{ itme.finance }}</span>
                                                <div class="frame">
                                                    <div style="transform: translateX(40px) translateY(0px)">
                                                        <i
                                                            style=" display: inline-block;  width:10px; height: 10px; border-radius: 50%;  background-color: #3ea0ff;"></i>
                                                        {{ itme.affirm }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="待确认" name="fourth">
                                        <div style="margin-top: 10px;" v-for="itme in  list" :key="itme.id">
                                            <div class="Orderswitching">
                                                <span class="el-icon-s-order">订单编号 <span>{{ itme.name }}</span></span>
                                                <div style="width: 2px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.age }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span style="color: #a19b83;">{{ itme.time }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.bank }}</span>
                                                <span> 联系人:</span>
                                                <span>{{ itme.linkman }}</span>
                                                <span>申请金额:</span>
                                                <span>{{ itme.money }}</span>
                                                <span>申请期限</span>
                                                <span>{{ itme.deadline }}</span>
                                            </div>
                                            <div class="box">
                                                <span>{{ itme.freight }}</span>
                                                <span>{{ itme.finance }}</span>
                                                <div>
                                                    <div style=" transform: translateX(20px) translateY(0px)">成交金额</div>

                                                    <div
                                                        style=" width: 103px; height: 36px;  border: 1px solid #eef0f5; display: flex; justify-content: center; align-items: center; ">
                                                        {{ itme.make }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div style=" transform: translateX(30px) translateY(0px)">利率</div>
                                                    <div
                                                        style=" width: 103px; height: 36px;  border: 1px solid #eef0f5; display: flex; justify-content: center; align-items: center;">
                                                        {{ itme.rate }}
                                                    </div>
                                                </div>
                                                <div class="frame">
                                                    <div
                                                        style="display: flex;  flex-direction: column; justify-content:center;align-items: baseline; ">
                                                        <el-button style="width: 95px; margin-bottom: 5px; "
                                                            type="primary">协议确认</el-button>
                                                        <el-button style="width: 95px; margin-bottom: 5px;"
                                                            type="primary">反馈</el-button>
                                                        <el-button style="width: 95px;" type="primary">取消订单</el-button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="待评价" name="remain">
                                        <div style="margin-top: 10px;" v-for="itme in  list" :key="itme.id">
                                            <div class="Orderswitching">
                                                <span class="el-icon-s-order">订单编号 <span>{{ itme.name }}</span></span>
                                                <div style="width: 2px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.age }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span style="color: #a19b83;">{{ itme.time }}</span>
                                                <div style="width: 1px; height: 20px; background-color: #a19b83;"> </div>
                                                <span>{{ itme.bank }}</span>
                                                <span> 联系人:</span>
                                                <span>{{ itme.linkman }}</span>
                                                <span>申请金额:</span>
                                                <span>{{ itme.money }}</span>
                                                <span>申请期限</span>
                                                <span>{{ itme.deadline }}</span>
                                            </div>
                                            <div class="box">
                                                <span>{{ itme.freight }}</span>
                                                <span>{{ itme.finance }}</span>
                                                <div>
                                                    <div style=" transform: translateX(20px) translateY(0px)">成交金额</div>
                                                    <div
                                                        style=" width: 103px; height: 36px;  border: 1px solid #eef0f5; display: flex; justify-content: center; align-items: center; ">
                                                        {{ itme.make }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div style=" transform: translateX(30px) translateY(0px)">利率</div>
                                                    <div
                                                        style=" width: 103px; height: 36px;  border: 1px solid #eef0f5; display: flex; justify-content: center; align-items: center;">
                                                        {{ itme.rate }}
                                                    </div>
                                                </div>
                                                <div class="frame">
                                                    <el-button @click="evaluate" type="primary">去评价</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                                <el-row type="flex" justify="end" style="margin-top: 10px;">
                                    <el-col>
                                        <el-row type="flex" justify="end">
                                            <!-- 分页 -->
                                            <div class="block">
                                                <el-pagination background layout="total, prev, pager, next" :total="100">
                                                </el-pagination>
                                            </div>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>

                        <!-- 我的订单区域 -->
                        <div v-if="showhiddenmembersone" style="width: 1010px;">订单中心</div>
                        <OrderEvaluation :list="list" v-if="showhiddenmembersint"></OrderEvaluation>
                    </el-card>
                </div>

            </el-card>
        </div>
    </div>
</template>

<script>
import OrderEvaluation from "./components/Orderevaluation.vue";
export default {
    components: {
        OrderEvaluation
    },
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '123456789',
                    age: "小明",
                    time: "2022-11-18 10:33:54",
                    bank: "中国银汉",
                    linkman: "张三",
                    money: "1000万元",
                    deadline: '6~12个月',
                    freight: "工商银行企业小额贷款",
                    finance: "建行理财/不超过4.25%/0-300万/0-12个月",
                    make: "1000万",
                    rate: "4.5%",
                    affirm: "待确认",
                    good: "信用",
                    country: "乡村振兴"
                },
                {
                    id: 2,
                    name: '123456789',
                    age: "小明",
                    time: "2022-11-18 10:33:54",
                    bank: "中国银汉",
                    linkman: "张三",
                    money: "1000万元",
                    deadline: '6~12个月',
                    freight: "工商银行企业小额贷款",
                    finance: "建行理财/不超过4.25%/0-300万/0-12个月",
                    make: "1000万",
                    rate: "4.5%",
                    affirm: "待确认"
                },
                {
                    id: 3,
                    name: '123456789',
                    age: "小明",
                    time: "2022-11-18 10:33:54",
                    bank: "中国银汉",
                    linkman: "张三",
                    money: "1000万元",
                    deadline: '6~12个月',
                    freight: "工商银行企业小额贷款",
                    finance: "建行理财/不超过4.25%/0-300万/0-12个月",
                    make: "1000万",
                    rate: "4.5%",
                    affirm: "待确认"
                },
                {
                    id: 4,
                    name: '123456789',
                    age: "小明",
                    time: "2022-11-18 10:33:54",
                    bank: "中国银汉",
                    linkman: "张三",
                    money: "1000万元",
                    deadline: '6~12个月',
                    freight: "工商银行企业小额贷款",
                    finance: "建行理财/不超过4.25%/0-300万/0-12个月",
                    make: "1000万",
                    rate: "4.5%",
                    affirm: "待确认"
                },


            ],
            showhiddenmembers: true,//控制显示隐藏我的订单
            showhiddenmembersone: false,//控制订单中心
            showhiddenmembersint: false,//控制订单评价
            activeName: 'first',
            inquiry: true,
            showdisplay: false
        }
    },
    methods: {
        back() {
            this.$router.go(0)
            //刷新当前页面
        },
        evaluate() {
            this.showhiddenmembersint = true//订单评价打开
            this.showhiddenmembers = false
            this.showhiddenmembersone = false
            this.showdisplay = true
        },
        members() {
            this.showhiddenmembers = false//关闭我的订单
            this.showhiddenmembersone = true//打开订单中心
            this.showhiddenmembersint = false//关闭订单评价
            this.showdisplay = false

        },
        hidden() {//我的订单
            this.showhiddenmembers = true//显示我的订单
            this.showhiddenmembersone = false//关闭订单中心
            this.showhiddenmembersint = false//关闭订单评价
            this.showdisplay = false

        },

    }
}
</script>

<style lang="less" scoped>
.bovin {
    position: relative;

    .btn {
        position: absolute;
        top: -55px;
        right: 110px;
    }
}

.order {
    width: 100%;
    height: 100%;
    background-color: #f7f8fa;

    .myorder {
        width: 215px;
        height: 100%;
        margin-left: 100px;
    }

    .Orderswitching {
        width: 1008px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 60px;
        background-color: #f7f8fa;
        border: 1px solid#ebedf3;
    }

    .box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 1008px;
        height: 145px;
        border-left: 1px solid #ebedf3;
        border-bottom: 1px solid #ebedf3;
        border-right: 1px solid #ebedf3;

        .frame {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 219px;
            height: 100%;
            border-left: 1px solid #ebedf3;

        }

        .frameone {
            width: 219px;
            height: 100%;
            border-left: 1px solid #ebedf3;
        }

        .frameint {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 100%;
            background-color: antiquewhite;
            border-left: 1px solid #ebedf3;
        }
    }

    /deep/.el-tabs__nav-wrap::after {
        height: 0px;
    }
}
</style>
